<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="./CSS/all.css">
    <title>citySearch</title>
</head>

<body>

    <div class="container">
        <div class="header">
            <h1>景点搜索</h1>
        </div>
        <div class="searchNumber">
            <input id="searchContent" type="text" placeholder="输入你的查询">
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <img id="myImg" src="./Image/background.jpg" alt="具体地图坐标吧" width="300" height="200" style="display:none;">

        <div id="myModal" class="modal">

            <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>
            <img class="modal-content" id="img01">
            <div id="caption">这是一张图片</div>
        </div>
        <div class="insertCard">

        </div>

        <style>
            * {
                padding: 0px;
                margin: 0px;
            }

            .insertCard {

                width: 100%;
                min-height: 1000px;

            }

            #myImg {
                border-radius: 5px;
                cursor: pointer;
                transition: 0.3s;
            }

            #myImg:hover {
                opacity: 0.7;
            }

            .modal {
                display: none;
                position: fixed;
                z-index: 1234;
                padding-top: 100px;
                left: 0;
                top: 0;
                width: 100%;

                height: 100%;
                overflow: auto;
                background-color: rgb(0, 0, 0);
                background-color: rgba(0, 0, 0, 0.9);
            }

            .modal-content {
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
            }

            #caption {
                margin: auto;
                display: block;
                width: 80%;
                max-width: 700px;
                text-align: center;
                color: #ccc;
                padding: 10px 0;
                height: 150px;
            }

            .modal-content,
            #caption {
                -webkit-animation-name: zoom;
                -webkit-animation-duration: 0.6s;
                animation-name: zoom;
                animation-duration: 0.6s;
            }

            @-webkit-keyframes zoom {
                from {
                    -webkit-transform: scale(0)
                }

                to {
                    -webkit-transform: scale(1)
                }
            }

            @keyframes zoom {
                from {
                    transform: scale(0)
                }

                to {
                    transform: scale(1)
                }
            }

            .close {
                position: absolute;
                top: 15px;
                right: 35px;
                color: #f1f1f1;
                font-size: 40px;
                font-weight: bold;
                transition: 0.3s;
            }

            .close:hover,
            .close:focus {
                color: #bbb;
                text-decoration: none;
                cursor: pointer;
            }

            @media only screen and (max-width: 700px) {
                .modal-content {
                    width: 100%;
                }
            }

            .searchNumber {
                width: 100%;
                height: 100px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .cardImg {

                display: flex;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                border: 1px solid black;
                border-radius: 20px;
                width: 80%;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            .cardImg img {
                width: 100px;
                height: 100px;
            }

            .cardImg button {
                width: auto;
                height: 20px;
            }

            .cardImg img {
                max-width: 300px;
                height: auto;
            }

            .hideLocation {
                display: none;
            }

            .findIpImg {
                max-width: 200px;
                height: auto;
                position: fixed;
                z-index: 100;
                top: 20px;
            }

            .card {
                width: 95%;
                height: 200px;
                margin: 0 auto;
                background-color: rgb(162, 162, 162, .2);
                border-radius: 20px;

            }

            .cardLeft {
                float: left;
                width: 40%;
                display: flex;
                align-items: center;
            }

            .cardLeftDiv {
                width: 100px;
                height: 100px;
            }

            .cardLeftDiv img {
                max-width: 100px;
            }

            .cardRight {
                width: 60%;
                height: 100%;
                float: right;
                display: flex;
                flex-wrap: wrap;
                flex-direction: column;
                justify-content: space-around;
            }

            .cardRight img {
                width: 20px;
                height: 20px;
            }

            .cardRight p {
                width: 100%;
                height: auto;
            }

            .cardRight h2 {
                width: 100%;
                height: auto;
            }

            .cardRight h3 {
                width: 100%;
                height: auto;
                display: flex;
                align-items: center;
            }
        </style>

        <script type="module">
            import * as method from './JS/everyMethodTwo.js'
            window.onload = function () {
                $('.selectMethod').change(waitSubmit())


                function waitSubmit(){
                    console.log('调用了')
                    return function(event){
                        let timeOut;
                        clearTimeout(timeOut)
                        timeOut=setTimeout(() => {
                            changeSubmit(event)
                        }, 5000);
                    }
                }

                function changeSubmit(event) {
                    console.log('login')
                    let searchContent = $('#searchContent')[0].value
                    if (searchContent != null) {
                        let url = `https://restapi.amap.com/v3/place/text?key=3bf9860fb71f22a636e1758b76603bbb&keywords=${searchContent}`
                        let value = event.target.value
                        if (value == 'jq') {
                            method.xmlFindJq('GET', url, jqXhrGetData)
                        } else if (value == 'axios') {
                            method.axiosFind('GET', url, axiosGetData)
                        } else if (value == 'js') {
                            method.xmlFindJs('GET', url, jsXhrGetData)
                        }
                    } else {
                        alert('搜索关键字不能为空')
                    }
                }
                function axiosGetData(response) {
                    console.log('axios',response)

                    execudateData(response.data)


                }
                function jqXhrGetData(response) {
                    console.log('jq',response)

                    execudateData(response)

                }
                function jsXhrGetData(response) {
                    console.log(response)

                    execudateData(JSON.parse(response))

                }

                function axiosData(element) {
                    var img = document.getElementById('myImg');
                    img.src = locationUrl
                    var modal = document.getElementById('myModal');

                    var modalImg = document.getElementById("img01");
                    var captionText = document.getElementById("caption");

                    modal.style.display = "block";
                    modalImg.src = img.src;
                    captionText.innerHTML = img.alt;

                    var span = document.getElementsByClassName("close")[0];
                    span.onclick = function () {
                        modal.style.display = "none";
                    }
                }

                let strList;
                function execudateData(response) {

                  console.log('渲染',response)

                    for (var i = 0; i < response.pois.length; i++) {
                        try {
                            if (response.pois[i].photos[0].url != null) {
                                strList += `
                                <div class="card">

<div class="cardLeft">
    <div class="cardLeftDiv">
           <img src="${response.pois[i].photos[0].url}">
    </div>
 
</div>
<div class="cardRight">
    <h2>${response.pois[i].adname + response.pois[i].address}</h2>
    <p><img src="./Image/学校.png">${response.pois[i].type}</p>
    <h3>${response.pois[i].name}<span class="hideLocation">${response.pois[i].location}</span> <img class="searhIp" src="./Image/地图.png"></h3>
</div>
</div>`
                            }
                        } catch (error) {
                            console.log(error)
                        }

                    }
                    $('.insertCard').append(strList)
                    execudateClick()

                }
                let locationUrl;
                function execudateClick() {
                    let searchIpList = document.querySelectorAll('.searhIp')
                    for (var i = 0; i < searchIpList.length; i++) {
                        searchIpList[i].addEventListener('click', function () {
                            let currentLocation = this.previousElementSibling.innerText
                            if (currentLocation != null) {
                                locationUrl = `https://restapi.amap.com/v3/staticmap?key=3bf9860fb71f22a636e1758b76603bbb&location=${currentLocation}&zoom=10`
                                method.axiosFind('GET', locationUrl, axiosData)

                                axiosData(this)
                            }
                        })
                    }
                }

            }
        </script>
</body>

</html>